<template>
    <div class="upload-cut-own-img-com"
        :style="{'width': width / 3.25 / 1.5 + 'px', 'height': height / 3.25 / 1.5 + 'px'}">
        <div class="input-box"
            v-loading="loading"
            :style="{'width': width / 3.25 / 1.5 + 'px', 'height': height / 3.25 / 1.5 + 'px'}">
            <img :src="option.img" alt="" class="input-img" v-if="option.img">
            <span class="input-add" v-else>
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </span>
            <input type="file" ref="input" @change="imgInput" class="input-file">
        </div>

        <!-- 编辑图片 -->
        <el-dialog
            title="编辑图片"
            class="drap-dialog-box"
            :visible.sync="showImgEdit"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="90%">
            <div class="desc-text">注：如裁剪框小于{{width}} x {{height}}，说明所上传图片尺寸不符和要求，建议 <b>更换图片</b> 或 <b>原图上传</b></div>
            <div class="drap-box">
                <vueCropper
                    class="cropper-box"
                    ref="cropper"
                    :img="option.img"
                    :autoCropWidth="option.width"
                    :autoCropHeight="option.height"
                    :outputSize="1"
                    :fixedBox="true"
                    :autoCrop="true"
                    :centerBox="true"
                    :infoTrue="true"
                    :canMoveBox="false"
                    :enlarge="3"
                ></vueCropper>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleUploadImg">取 消</el-button>
                <el-button type="primary" @click="cutImg">确 定</el-button>
                <el-button type="success" @click="noCutImg">不裁剪原图上传</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
    name: 'uploadCutOwnImg',
    data () {
        return {
            option: {
                img: '',
                width: 328,
                height: 320
            },
            loading: false,
            showImgEdit: false,
            files: null,
            currentItem: {
                name: '',
                url: ''
            }
        }
    },
    props: {
        value: {},
        width: {
            default: 328
        },
        height: {
            default: 320
        }
    },
    watch: {
        value (val) {
            this.option.img = val
        },
        width (val) {
            this.option.width = val / 3
        },
        height (val) {
            this.option.height = val / 3
        }
    },
    created () {
        this.option.img = this.value
        this.option.width = this.width / 3
        this.option.height = this.height / 3
    },
    methods: {
        imgInput (e) {
            this.files = e.target.files[0]
            let reader = new FileReader()
            reader.readAsDataURL(this.files)
            reader.onloadend = () => {
                this.option.img = reader.result
                this.showImgEdit = true
            }
        },

        cancleUploadImg () {
            this.showImgEdit = false
            this.option.img = this.value
            this.$refs.input.value = null
        },

        cutImg () {
            this.$refs.cropper.getCropBlob((data) => {
                this.files = data
                this.uploadImg()
            })
        },

        noCutImg () {
            this.uploadImg()
        },

        async uploadImg () {
            if (this.loading) return
            this.loading = true
            this.showImgEdit = false
            let files = this.files
            if (!files) return
            let formData = new FormData()
            formData.append('file', files)
            formData.append('needTransform', 1)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            let res = await this.$http.post('/file/uploadPic', formData, config)
            if (res.code === '0') {
                this.option.img = res.data
                this.$emit('input', res.data)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
            this.files = null
            this.$refs.input.value = null
        }

    },
    components: {
        VueCropper
    }
}
</script>

<style lang="scss">
    .upload-cut-own-img-com {
        .input-box {
            position: relative;
            top: 0;
            left: 0;
            z-index: 1;
            overflow: hidden;
            border: 1px dashed #d9d9d9;
            &:hover {
                border-color: #409eff;
            }
            .input-img {
                width: 100%;
                height: 100%;
            }
            .input-add {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 1;
                transform: translate(-50%, -50%);
                font-size: 50px;
            }
            .input-file {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                opacity: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }

        // 编辑图片
        .drap-dialog-box {
            .el-dialog {
                margin-top: 50px;
            }
            .el-dialog__header {
                padding: 10px 20px 0;
            }
            .el-dialog__body {
                padding: 0 20px;
            }
            .desc-text {
                line-height: 20px;
                margin-bottom: 10px;
            }
            .drap-box {
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
                height: 500px;
                .cropper-box {
                    height: 500px;
                }
            }
        }
    }
</style>
